<!--自定义图表-->

<template>
  <div class="w-h-full">
    <div v-if="shade" class="shade"></div>
    <div v-resize="resizeHandle" style="width: 100%; height: 100%;">
      <div :id="'chart-'+component.id" class="w-h-full"></div>
    </div>
  </div>
</template>

<script>
  import FuncCompMixin from '@/mixin/FuncCompMixin'
  import PnDesigner from '@/utils/PnDesigner'

  const _this = {
    name: 'CustomChartComp',
    mixins: [FuncCompMixin],
    attr: {
      version: '1.1',
      configDataTemp: Object.assign({

        customJsCode: 'let option = {\n' +
          '  \n' +
          '}\n' +
          '\n' +
          'this.chart.setOption(option, true)',

      }, PnDesigner.buildFuncCompDatasourceField({
        ds_resultObjTemplate: [

        ],
        ds_resultObj: [

        ],
        ds_useFilter: false,
        ds_useTimer: true,
      }))
    },
    data() {
      return {
        chart: null, // 存储图表实例
        echartThemeName: '', // echart主题名称
      }
    },
    mounted() {
      this.chart = this.$Echarts.init(document.getElementById('chart-'+this.component.id));
      this.init();
    },
    methods: {
      resizeHandle () {
        if (this.chart) {
          this.chart.resize();
        }
      },

      init () {
        console.log('CustomChartComp init');
        eval(this.component.compConfigData.customJsCode)
      }

    },
    beforeDestroy () {
      if (this.chart) {
        this.chart.dispose()
      }
    },
    computed: {

    },
    watch: {
      'component.compConfigData.customJsCode': {
        handler: function (val, oldVal) {
          if (val != oldVal) {
            this.init()
          }
        }
      }
    }
  };

  export default _this
</script>

<style scoped>

</style>
